<template>

	<Tabs :animated="false">
		<Tab-pane label="用户信息" class="leftlist">
			<!-- 个人信息表单 -->
			<Form ref="userInfo" :model="userInfo" :rules="ruleValidate" label-position="left" :label-width="80">
				<Card :bordered="false" style="width:700px">
					<Row>
						<Col span="23">
						<Col span="12">
						<Form-item label="姓名" prop="name" style="width: 98%;">
							<Input v-model="userInfo.name" placeholder="请输入姓名"></Input>
						</Form-item>
						</Col>
						<Col span="9" offset="1">
						<Form-item label="个人头像">
							<div class="demo-upload-list" v-for="item in uploadList">
								<template v-if="item.status === 'finished'">
									<img :src="item.url">
									<div class="demo-upload-list-cover">
										<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
									</div>
								</template>
								<template v-else>
									<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
								</template>
							</div>
							<Upload ref="upload" 
								:show-upload-list="false" 
								:default-file-list="defaultList" 
								:on-success="handleSuccess" 
								:format="['jpg','jpeg','png']" 
								:max-size="2048" 
								:on-format-error="handleFormatError" 
								:on-exceeded-size="handleMaxSize" 
								:before-upload="handleBeforeUpload" 
								type="drag" 
								action="http://192.168.1.38:8080/upload" 
								style="display: inline-block;width:58px;">
								<div style="width: 58px;height:58px;line-height: 58px;">
									<Icon type="camera" size="20"></Icon>
								</div>
							</Upload>
							<Modal v-model="visible">
								<p slot="header" style="color:#fff;text-align:center;">
									<!--<Icon type="information-circled"></Icon>-->
									<span>查看图片</span>
								</p>
								<img :src="imgUrl" v-if="visible" style="width: 100%">
							</Modal>
						</Form-item>
						</Col>
						</Col>
					</Row>

					<Row>
						<Col span="23">
						<Col span="12">
						<Form-item label="身份证号" prop="idCards" style="width:100%;">
							<Input v-model="userInfo.idCards" placeholder="请输入身份证号"></Input>
						</Form-item>
						</Col>
						<Col span="11" offset="1">
						<Form-item label="出生日期" prop="brithday" style="width:100%;">
							<Date-picker type="date" placeholder="选择日期" v-model="userInfo.brithday" style="width:100%;"></Date-picker>
						</Form-item>
						</Col>
						</Col>
					</Row>
					<Row>
						<Col span="23">
						<Col span="12">
						<Form-item label="联系电话" prop="phone" style="width: 100%;">
							<Input v-model="userInfo.phone" placeholder="请输入联系电话"></Input>
						</Form-item>
						</Col>
						<Col span="9" offset="1">
						<Form-item label="性别" style="width: 100%;">
							<Radio-group v-model="userInfo.sex">
								<Radio label="男">
									<span>男</span>
								</Radio>
								<Radio label="女">
									<span>女</span>
								</Radio>

							</Radio-group>
						</Form-item>
						</Col>
						</Col>
					</Row>

					<Row>
						<Col span="23">
						<Col span="12">
						<Form-item label="邮箱" prop="email" style="width: 100%;">
							<Input v-model="userInfo.email" placeholder="请输入邮箱"></Input>
						</Form-item>
						</Col>
						<Col span="12">

						</Col>
						</Col>
					</Row>
					<Row>
						<Col span="23">
						<Form-item label="住址" prop="address" style="width: 100%;">
							<Input v-model="userInfo.address" placeholder="请输入地址"></Input>
						</Form-item>
						</Col>
					</Row>

					<Row type="flex" justify="end">
						<Form-item style="margin-right: 20px;">
							<Button type="ghost" @click="handleReset('userInfo')" style="margin-left: 8px">取消</Button>
							<Button type="primary" @click="Submit('userInfo')">提交</Button>
						</Form-item>
					</Row>
				</Card>
			</Form>
		</Tab-pane>
		<Tab-pane label="更改密码">
			<Form ref="pwdValidate" :model="pwdValidate" :rules="pwdrule" label-position="left" :label-width="80">
				<Card :bordered="false" style="width:700px">
					<Row type="flex" justify="center">
						<Col span="12">
						<Form-item label="旧密码" prop="oldpwd" style="width: 100%;">
							<Input type="password" v-model="pwdValidate.oldpwd" placeholder=""></Input>
						</Form-item>
						</Col>
					</Row>
					<Row type="flex" justify="center">
						<Col span="12">
						<Form-item label="新密码" prop="newpwd" style="width: 100%;">
							<Input type="password" v-model="pwdValidate.newpwd" placeholder=""></Input>
						</Form-item>
						</Col>
					</Row>
					<Row type="flex" justify="center">
						<Col span="12">
						<Form-item label="确认密码" prop="refpwd" style="width: 100%;">
							<Input type="password" v-model="pwdValidate.refpwd" placeholder=""></Input>
						</Form-item>
						</Col>
					</Row>
					<Row type="flex" justify="end">
						<Form-item style="margin-right: 20px;">
							<Button type="ghost" @click="PwdReset('pwdValidate')" style="margin-left: 8px">重置</Button>
							<Button type="primary" @click="PwdSubmit('pwdValidate')">提交</Button>
						</Form-item>
					</Row>
				</Card>
			</Form>
		</Tab-pane>
	</Tabs>

</template>
<script>
	export default {
		data() {
			//身份证验证
			const validateIdCard = (rule, value, callback) => {
				let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				let error = []
				if(value === '') {
					error.push('请输入身份证号')
				} else if(!reg.test(value)) {
					error.push('请输入正确格式的身份证')
				}
				callback(error);
			};
			let phone = (rule, value, callback) => {
				if(value === '') {
					callback();
				}
				let res = /^([0-9]{3,4}-)?[0-9]{7,8}$/

				let re =
					/^((\+?86)|(\(\+86\)))?(13[0123456789][0-9]{8}|15[0123456789][0-9]{8}|18[0123456789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
				if(!re.test(value) && !res.test(value)) {
					callback(new Error('请输入正确的电话号码!'));
				} else {
					callback();
				}
			};
			//输入原来密码
			let oldpassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入原密码'));
				} else {
					callback();
				}
			};
			//输入新密码
			let newpassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					if(this.pwdValidate.newpwd !== '') {
						// 对第二个密码框单独验证
						this.$refs.pwdValidate.validateField('refpwd');
					}
					callback();
				}
			};
			//再次确认
			let refpassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.pwdValidate.newpwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			//手机号验证
			const validatePhoneNumber = (rule, value, callback) => {
				let reg = /(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;
				let error = []
				if(value === '') {
					error.push('请输入联系电话')
				} else if(!reg.test(value)) {
					error.push('请输入正确格式的联系电话')
				}
				callback(error);
			};
			//邮箱验证
			const validateEmail = (rule, value, callback) => {
				let reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
				let error = []
				if(value === '') {
					error.push('请输入邮箱地址')
				} else if(!reg.test(value)) {
					error.push('请输入正确格式的邮箱地址')
				}
				callback(error);
			};
			return {
				modal1: false,
				defaultList: [],//默认上传文件的钩子
				imgName: '',
				visible: false,
				uploadList: [],
				url: '',

				frolename: '',
				userInfo: {
					name: '',
					idCards: '',
					birthday: '',
					phone: '',
					email: '',
					address: '',
					sex: '男',
					picture: ''
				},
				pwdValidate: {
					oldpwd: '',
					newpwd: '',
					refpwd: ''
				},
				//录入用户信息校验
				ruleValidate: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}],
					brithday: [{
						required: true,
						type: 'date',
						message: '请选择日期',
						trigger: 'change'
					}],
					idCards: [{
						required: true,
						validator: validateIdCard,
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: validatePhoneNumber,
						trigger: 'blur'
					}],
					email: [{
						required: true,
						validator: validateEmail,
						trigger: 'blur'
					}],
				},
				//修改密码校验
				pwdrule: {
					oldpwd: [{
						// required: true,
						validator: oldpassword,
						trigger: 'blur'

					}],
					newpwd: [{
						// required: true,
						validator: newpassword,
						trigger: 'blur'
					}, {
						type: 'string',
						min: 5,
						message: '密码长度不能小于5位',
						trigger: 'blur'
					}],
					refpwd: [{
						// required: true,
						validator: refpassword,
						trigger: 'blur'
					}]
				}
			}
		},
		created() {

		},
		mounted: function() {
			this.uploadList = this.$refs.upload.fileList;

		},
		methods: {
			handleView(name) {
				this.imgName = name;
				this.visible = true;
			},
			//上传文件成功的钩子
      handleSuccess (res, file,fileList) {
      	console.info(res)
        // 因为上传过程为实例，这里模拟添加 url
        let path = "http://192.168.1.38:8080/";
       file.url = path + res.obj.path;
        file.name = res.obj.name;
        this.$refs.upload.fileList=fileList;
        this.imgUrl = file.url;
       
      },
			//上传文件失败的钩子
			handleFormatError(file) {
				this.$Notice.warning({
					title: '文件格式不正确',
					desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
				});
			},
			//允许上传文件的大小
			handleMaxSize(file) {
				this.$Notice.warning({
					title: '超出文件大小限制',
					desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
				});
			},
			//文件上传之前的钩子
			handleBeforeUpload(res) {
				const check = this.uploadList.length < 5;
				if(!check) {
					this.$Notice.warning({
						title: '最多只能上传 5 张图片。'
					});
				}
				return check;
			},

			Submit: function(name) {
				  this.userInfo.picture = this.imgUrl;
				//				 this.userInfo.picture = this.imgUrl;
				//				 console.info(this.userInfo.picture)
				console.log(this.userInfo)
				let that = this;
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$http.post('http://192.168.1.38:8080/person/addPersonInfo', this.userInfo).then(function(response) {
							let isOk = response.data;
							console.info(isOk)
							if(isOk.flag) {
								that.$Message.success(isOk.message);
							} else {

								//that.$Message.error(isOk.message);
							}
							this.handleReset(name)
						}, response => {

						});

					} else {
						this.$Message.error('表单验证失败!');
					}

				})
			},

			handleReset(name) {
				this.$refs[name].resetFields();
			},
			PwdSubmit(name) {
				let that = this;
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$http.post('http://192.168.1.38:8080/person/changePassword', {
							oldPassword: this.pwdValidate.oldpwd,
							newPassword: this.pwdValidate.newpwd,
							surePassword: this.pwdValidate.refpwd
						}).then(function(response) {

							let isOk = response.data;
							console.info(isOk)

							if(isOk.flag) {
								that.$Message.success(isOk.message);
							} else {

								that.$Message.error(isOk.message);
							}

						}, response => {

						});

						that.$refs[name].resetFields();
					} else {
						that.$Message.error('表单验证失败!');
					}
				})
			},
			PwdReset(name) {
				this.$refs[name].resetFields();
			}
		}
	}
</script>
<style>
	.demo-upload-list {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}
	
	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}
	
	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}
	
	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}
	
	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>